<template>
  <b-scroll ref="scroll" :pullUpLoad=true @pullingUp="pullingUpHandle">
    <div class="home-content top-background">
      <div class="top-background">
        <focus-info></focus-info>
        <div class="shadow"></div>
      </div>
      <layer>
        <article-list>
          <article-title mainTopic="FireWorks_V2.0"></article-title>
          <article-item v-for="item in postList.list" :isLeft="item.postId % 2 === 0" :key="item.postId"
                        :postObj="item"></article-item>
        </article-list>
      </layer>
      <fireworks-footer></fireworks-footer>
    </div>
  </b-scroll>
</template>
<script>
import bScroll from '@/components/scroll/bScroll.vue'
import focusInfo from '@/views/home/childComponments/focusinfo.vue'
import layer from '@/components/scroll/scroll'
import ArticleList from '@/views/home/childComponments/articleList'
import ArticleTitle from '@/views/home/childComponments/articleTitle'
import ArticleItem from '@/views/home/childComponments/articleItem'
import fireworksFooter from '@/components/footer/footer'
import { postsItem } from '@/api/getNeedData'

export default {
  name: 'home',
  data () {
    return {
      postList: {
        page: 1,
        list: []
      },
      articleTopic: '主题',
      curPage: 1,
      pageSize: 2,
      isLoading: false,
      total: Infinity,
    }
  },
  components: {
    ArticleItem,
    ArticleList,
    bScroll,
    focusInfo,
    layer,
    ArticleTitle,
    fireworksFooter
  },
  methods: {
    // 请求post的接口 cur为当前页数  ps为pageSize
    getPost (cur, ps) {
      // 判断当前页数是否大于总页数
      let curTotal = this.curPage * this.pageSize
      if (curTotal >= this.total) {
        this.$refs.scroll.scroll.finishPullUp()
        return
      }
      this.curPage++
      this.$http.queryPostByPage(cur, ps).then((res) => {
        this.$refs.scroll.scroll.finishPullUp()
        if (res && res.code === 200) {
          const data = res.data
          this.total = data.total
          data.list.forEach((item) => {
            this.postList.list.push(new postsItem(item))
          })
          setTimeout(() => {
            this.$refs.scroll && this.$refs.scroll.refresh()
          },500)
        } else {
          this.user = {}
          this.menus = undefined
          let msg = res ? (res.msg ? res.msg : '未知错误') : '未知错误'
          this.$message({
            message: msg,
            type: 'warning'
          })
        }
      }).catch((err) => {
        console.log(err)
        this.$message({
          message: '数据获取异常,请检查网络连接，稍后重试。',
          type: 'warning',
          duration: 2000
        })
      })
    },
    pullingUpHandle () {
      this.getPost(this.curPage, this.pageSize)
    }
  },
  created () {
    this.getPost(this.curPage, this.pageSize);
  }
}
</script>

<style scoped lang="scss">

.home-content {

  .top-background {
    position: relative;
    width: 100vw;
    background-image: url("https://cdn.ryanc.cc/img/blog/thumbnails/bd603f0a8e74c69c9c227e0d2eec4394.jpeg");
    background-color: rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    background-size: cover;
    background-position: center center;
    height: 100vh;
    background-attachment: fixed;
  }
}

.shadow {
  position: absolute;
  top: 0;
  z-index: 10;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.3);
}

</style>
<style scoped>
::v-deep .el-menu--horizontal > .el-menu-item .is-active {
  border-bottom: 0 !important;
}
</style>